import { PureComponent, Fragment } from "react";
import { Picker } from "antd-mobile";
import MToast from "../../Util/MToast"
import { isNull, combineDefaultStr } from "../../../utils/helper"
import MIcon from "../../MIcon"
import { district, provinceLite } from "antd-mobile-demo-data";
console.log("district", district)
interface Props {
	value?: any,
	onChange?: Function,
	setFieldsValue: Function,
	field: string[],
	label?: string,
	required?: any,
	disabled?: any,
	readonly?: any,
	show_label?: any,
	tips?: string,
	list: any[],
	dispatch: Function,
	formDataKey: string,
	dataset_key?: string,
	fd: object,
	default_select_index?: any,
	hasError: boolean,
	errorMsg: string
}

interface State {
	value?: any
}

export default class MySelectAddress extends PureComponent<Props, State>{
	public state: State = {
		value: this.props.value
	}
	componentWillReceiveProps(nextProps: Props) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		let { value: oldValue } = this.state;
		if (value === oldValue) {
			return;
		}
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (value) => {
		console.log("onChange", value);
		value = value.join(",")
		// value = value[0];
		this.changeValue(value);
	};
	render() {
		let { setFieldsValue, field, label, required, disabled, readonly, show_label, tips, list, dispatch, formDataKey, dataset_key, fd, default_select_index, hasError, errorMsg } = this.props;
		let isDisabled = disabled == 1;
		let isReadonly = readonly == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value } = this.state;
		let loading = fd[dataset_key + "Loading"];
		let labelColor = "";
		if (!isNull(value)) {
			value = value.split(",").map(i => i * 1);
		}
		return (
			<div>
				<Picker
					data={list}
					title={label}
					value={value}
					onChange={this.onChange}
					disabled={isReadonly || isDisabled}
				>
					<PickerLabel {...this.props} label={label} isShowLabel={isShowLabel} isRequired={isRequired} hasError={hasError} errorMsg={errorMsg} labelColor={labelColor} />
				</Picker>
				{
					tips && <p className="tipsStyle">{tips}</p>
				}
			</div>

		)
	}
}
interface PickerLabelProps extends Props {
	onClick?: Function,
	extra?: any,
	isRequired: boolean,
	isShowLabel: boolean,
	label_width?: any,
	place_holder?: string,
	label_text_color?: string,
	label_text_align?: any,
	labelColor?: string,
	componentStyle?: object,
	label_left?: any,
	hidden_arrow?: any,
	input_flex?: any
}
interface PickerLabelState {

}
class PickerLabel extends PureComponent<PickerLabelProps, PickerLabelState> {
	public state: PickerLabelState = {

	}
	onClick = () => {
		let { onClick, list } = this.props;
		onClick && onClick()
	};
	render() {
		let { extra, label, tips, isRequired, required_no_star, text_align, isShowLabel, hasError, errorMsg, label_width, place_holder, label_text_color, label_text_align = "left", labelColor, componentStyle, label_left, hidden_arrow, input_flex, label_style } = this.props;
		if (extra === "请选择") {
			extra = isNull(place_holder) ? "请选择" : place_holder
		}
		let requiredClass = "am-list-item am-input-item am-list-item-middle";
		if (isRequired && required_no_star != 1) {
			requiredClass += " required"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		let onExtraClick = () => {
			MToast.info(tips, 2, null, false)
		};
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		// isNull(this.props.value)?"rgb(187,187,187)":"#000"
		if (isNull(this.props.value)) {
			labelColor = "rgb(187,187,187)"
		}
		else {
			if (isNull(labelColor)) {
				labelColor = "#000"
			}
		}
		let inputFlex = "dir:right";
		if (!isNull(input_flex)) {
			inputFlex += " " + input_flex
		}
		return (
			<div className={requiredClass} style={{ fontSize: "16px", ...componentStyle }} onClick={(e) => {
				this.onClick()
			}} data-flex="box:first">
				{
					isShowLabel ? <div className={labelClass} style={{ color: label_text_color, ...label_style }} >
						<div dangerouslySetInnerHTML={{ __html: label_left }}></div>
						{label}
					</div> : <div></div>
				}
				<div style={{ color: "#888" }} className="am-list-line" data-flex={inputFlex}>
					<div className="am-input-error-extra mi" onClick={(e) => {
						e.stopPropagation();
						MToast.info(errorMsg, 2, null, false)
					}}></div>
					{
						hidden_arrow != 1 && <MIcon type="xiayiye" style={{ color: "rgb(187, 187, 187)" }} />
					}
					<span style={{ color: labelColor, textAlign: text_align, width: "100%" }}>
						{extra}
					</span>
				</div>
			</div>
		)
	}
}
